<!-- 分组表单 -->
<template>
  <main class="page-main">

    <!--    操作按钮-->
    <a-button type="default" class="margin-left-20" @click="mode.showGroupEditButton=false"
              v-if="mode.showGroupEditButton">
      <icon icon-name="RollbackOutlined"></icon>
      退出修改
    </a-button>
    <span v-else>
      <a-button type="primary" class="margin-right-20" @click="mode.edit=true;current.id=0">
      <icon icon-name="PlusOutlined"></icon>
      新建{{ typeName }}
      </a-button>
        <a-button type="default" @click="mode.showGroupEditButton=true">
        <icon icon-name="EditOutlined"></icon>
        修改{{ typeName }}
      </a-button>
    </span>

    <a-tree class="margin-top-20" v-if="groupTree.length  > 0" defaultExpandAll :tree-data="groupTree">
      <template #title="{dataRef, key, title }">
        <span @click="handleGroupChange(key)">{{ title }}</span>
        <span v-if="mode.showGroupEditButton">
            <a-tooltip title="修改">
              <icon class="button-edit margin-left-10" icon-name="FormOutlined"
                    @click="handleGroupChange(key);mode.edit=true;current.id=key"></icon>
            </a-tooltip>
            <a-tooltip title="删除" v-if="!dataRef.children">
              <icon class="button-delete margin-left-10" icon-name="DeleteOutlined"
                    @click="handleGroupChange(key);mode.delete=true;current.id=key;current.title=title"></icon>
            </a-tooltip>
            </span>

      </template>
    </a-tree>
    <div class="margin-top-20" v-else>暂无素材库</div>

    <!-- 新增、编辑的表单-->
    <a-drawer v-model:open="mode.edit" :title="current.id?'修改'+typeName:'添加'+typeName" size="large">
      <GroupForm :key="new Date().getTime()" :type="type" :showIcon="mode.showIcon" :dataId="current.id" @close="handleCancel" @successed="handleQueryList"/>
    </a-drawer>

    <!-- 删除 -->
    <a-modal v-model:open="mode.delete" title="确定删除">
      <span>确定删除分组吗？删除后数据不可恢复</span>
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" danger @click="handleDelete">删除</a-button>
      </template>
    </a-modal>

  </main>
</template>
<script lang="ts">
import * as apiUtil from "@/api/ApiUtils";
import * as api from "@/api/SysGroupApi";
import {notification} from 'ant-design-vue';
import IconSelector from "@/components/IconSelector.vue";
import Icon from "@/components/Icon.vue";
import Form from "@/views/sysGroup/form.vue";
import GroupForm from "@/components/group/GroupForm.vue";

export default {
  props: {
    //分组类型
    type: {type: String},
    useIcon:{type: Boolean}
  },
  components: {GroupForm, Form, Icon, IconSelector},
  data() {
    return {
      typeName: "",
      groupTree: [],
      mode: {
        //编辑模式
        edit: false,
        //删除模式
        delete: false,
        showGroupEditButton: false,
        showIcon:false
      },
      //当前操作的数据
      current: {
        id: null,
        title: ""
      }
    }
  },
  methods: {
    handleGroupChange(groupId) {
      console.log("handleGroupChange", groupId);
      this.$emit("onGroupChange", groupId);
    },
    handleCancel() {
      this.mode.edit = false;
      this.mode.delete = false;
    },
    handleQueryList() {
      api.getTreeSelector({type: this.$props.type}).then((res) => {
        if (apiUtil.isSuccessed(res)) {
          this.groupTree = res.data.children ? res.data.children : [];
          this.typeName = res.data.label;
        }
      });
    },
    /**
     * 删除数据
     */
    handleDelete() {
      api.deleteById(this.currentId).then((res) => {
        if (apiUtil.isSuccessed(res)) {
          notification.success({
            message: "删除成功",
            description: "已删除"
          });
          this.mode.delete = false;
          this.handleQueryList();
        } else {
          //请求失败
          notification.error({
            message: "删除失败",
            description: res.message
          });
        }
      });
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.handleQueryList();

    if(this.$props.useIcon){
      this.mode.showIcon = true;
    }
  }
}
</script>
<style scoped>

</style>